<template>
  <div class="category">
    <Classify-Header title="商品分类"></Classify-Header>

    <div class="calssify-con">
      <div class="calssify-left" ref="wrapper">
        <!--<ul class="calssify-left-ul" >
          <li :index="menu.id" v-for="(menu,index) in menus.categoryList":class="{active:index===classifyIndex}" @click="change(menu.id)">
            {{menu.name}}
            <ul>
              <li index="sub.id" v-for="sub in subMenus" v-if="menu.id==menus.currentCategory.id" @click="getGoods(sub.id,sub.name)">
                {{sub.name}}
              </li>
            </ul>

          </li>
        </ul>-->

        <el-row class="tac" style="width:5.5rem;padding-top:1.2rem;">
          <el-col :span="12">
            <el-menu
              router unique-opened
              class="el-menu-vertical-demo"
              @select="getGoods"
              @open="handleOpen"
              @close="handleClose">
              <el-submenu :index="menu.id" v-for="(menu,index) in menus.categoryList">
                <template slot="title" @click="change(menu.id)">
                  <span>{{menu.name}}</span>
                </template>
                <el-menu-item :index="sub.id" v-for="sub in subMenus"
                              v-if="menu.id==menus.currentCategory.id" @click="getGoods(sub.id,sub.name)">
                  {{sub.name}}
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </div>


      <div class="calssify-rigth" ref="wrapper2">
        <!--<ul class="calssify-left-ul">
          <li v-for="(item,index) in goodsListRight" :key="item.id" @click="open(item.id)">
            <div class="list">
              <div class="image">
                <img v-lazy="item.picUrl" alt="item.goods.name">
              </div>
              <p class="name">{{item.name}}</p>
              <p class="counterPrice">原价：￥{{item.counterPrice}}</p>
              <p class="Price">现价：￥{{item.retailPrice}}</p>
            </div>
          </li>
        </ul>-->
        <default-goods-list :goodsList="goodsListRight" ></default-goods-list>



      </div>

    </div>

    <index-footer></index-footer>
  </div>

</template>

<script>
  import ClassifyHeader from "../common/header";
  import DefaultGoodsList from "../components/goodsDetails/DefaultGoodsList";
  import IndexFooter from './IndexFooter'

  export default {
    name: "Category",
    components: {
      DefaultGoodsList, ClassifyHeader,IndexFooter
    },
    data() {
      return {
        // menus:[]
        goodsList:[],
        goodsTitle:""
      }
    },
    created() {
      this.$fetch(this.rootUrl + 'catalog/all'/*'catalog/index'*/).then((response) => {
        // console.log("category:" + JSON.stringify(response));
        this.$store.dispatch('comitCategoryIndexList', response.data);
        // console.log("state:"+JSON.stringify(this.$store.state))
      })
    },
    computed: {
      // goodsList() {
      //   return this.$store.s
      // },
      menus() {
        return this.$store.state.categoryIndexList
      },
      subMenus() {
        return this.$store.state.categoryIndexList.currentSubCategory
      },
      goodsListRight() {
        return this.goodsList
      },
      getTitle() {
        return this.goodsTitle
      }
    },
    methods: {
      open(id) {
        this.$router.push({path:'goodsDetail', query: {id: id}})
      },
      getGoods(key,keyPath) {
        // goods/category
        console.log("key:" + key + ",keyPath:" + keyPath);
        var that = this
        var id = parseInt(key)
        that.axios.get(that.rootUrl + "goods/list", {
          params: {
            categoryId: id,
            size:99999
          }
        }).then(response => {
          console.log("result:" + JSON.stringify(response));
          that.goodsList=response.data.data.goodsList

        });
        // that.goodsTitle=name
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
        var that = this
        var id = key
        that.axios.get(that.rootUrl + "goods/category", {
          params: {
            id: id
          }
        }).then(response => {
          // console.log("result:" + JSON.stringify(response));
          that.$store.dispatch('commitSubMenus', response.data.data);

        });
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      change(id) {
        console.log('id' + id);
       /* var that = this
        that.axios.get(that.rootUrl + "goods/category", {
          params: {
            id: id
          }
        }).then(response => {
          console.log("result:" + JSON.stringify(response));
          that.goodsDetails.push(response.data.data);

        });*/
      }
    }
  }
</script>


<style lang="stylus" scoped>
  .active {
    border-left: 2px solid;
    background: #ffffff;
    color: #199cfe;
  }

  .calssify-con {
    display: flex;
    overflow: hidden;
    /*position: absolute;*/
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    padding-top: 0rem;

    .calssify-left {
      padding-top: 0.33rem
      flex: 0 0 2.9rem;
      width: 20%;
      height: 70%;
      background: #f6f6f6;
       border-right: 10px solid #f6f6f6;
      margin-bottom: 0rem;
      font-size 0.35rem

      /*li {
        height: 1.3rem;
        line-height: 1.3rem;
        text-align: center;
      }*/
    }

    .calssify-rigth {
      flex: 1;
      width:80%
      height: 100%;
      background: white;
      margin-bottom: 1.51rem;

      ul {
        display: flex;
        flex-wrap: wrap;

        li {
          display: flex;
          flex-direction: column;
          text-align: center;
          width: 33%;
          margin-top: 0.3rem;
          font-size: 0.34rem;
          float: left;

          img {
            width: 1.98rem;
            display: block;
            margin: auto;
          }

          span {
            color: #999;
            line-height: 0.9rem;
            font-size: 0.34rem;
          }
        }
      }
    }
  }
</style>
